
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Spec_Prompt - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>Spec_Prompt - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">Kiro的 "Steering" 功能是什么？它如何帮助开发团队？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">"Steering" 功能允许在与Kiro的交互中包含额外的上下文和指令。它通常被用来定义团队的标准和规范，提供项目相关的重要信息，或者指导如何完成特定任务（如构建、测试等）。</div>
          </div>
          <div class="card-source">来源: Key Kiro Features -> Steering</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">Kiro的 "Steering" 文件支持哪三种不同的包含（inclusion）机制？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">1. 总是包含（默认行为）。<br>2. 条件性包含（Conditional）：当读取的文件与 `fileMatchPattern` 匹配时包含，通过在front-matter中设置 `inclusion: fileMatch` 来配置。<br>3. 手动包含（Manual）：当用户通过上下文键（聊天中的'#'）提供时包含，通过在front-matter中设置 `inclusion: manual` 来配置。</div>
          </div>
          <div class="card-source">来源: Key Kiro Features -> Steering</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">工作流</div>
          <div class="card-question">在Kiro的 "Feature Spec Creation Workflow" 中，第一个阶段是什么？该阶段必须创建哪个文件，并且其内容需要包含哪些核心元素？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">工作流</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">第一个阶段是“需求收集”（Requirement Gathering）。在此阶段，必须创建 `.kiro/specs/{feature_name}/requirements.md` 文件。该文件必须包含一个清晰的引言、一个分层的需求列表，其中每个需求都包含一个用户故事（User Story）和一组使用EARS语法的验收标准（Acceptance Criteria）。</div>
          </div>
          <div class="card-source">来源: Feature Spec Creation Workflow -> 1. Requirement Gathering</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">规则</div>
          <div class="card-question">在 Kiro 的 "Feature Spec Creation Workflow" 中，从一个阶段（如需求）进入下一个阶段（如设计）的必要条件是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">规则</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">必要条件是获得用户的明确批准。在每个阶段的文档更新后，Kiro必须使用 `userInput` 工具向用户提问以寻求批准（例如："Do the requirements look good? If so, we can move on to the design."）。在收到用户明确的肯定答复（如 "yes", "approved", "looks good" 等）之前，不能进入下一个阶段。</div>
          </div>
          <div class="card-source">来源: Feature Spec Creation Workflow -> 1. Requirement Gathering (及后续阶段)</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">工作流</div>
          <div class="card-question">在 "Feature Spec Creation Workflow" 的第三阶段 "Create Task List" 中，生成的任务列表需要排除哪些类型的任务？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">工作流</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">任务列表必须只包含编码代理可以执行的任务（编写、修改或测试代码），并明确排除非编码任务，例如：用户验收测试、部署到生产环境、性能指标收集、运行应用进行端到端测试、用户培训或文档创建、业务流程变更等。</div>
          </div>
          <div class="card-source">来源: Feature Spec Creation Workflow -> 3. Create Task List</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">Kiro 的 "Hooks" 功能是什么？请举例说明其应用场景。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">"Hooks" 功能允许在IDE中发生特定事件（如保存文件）或用户点击按钮时，自动触发一个代理执行。例如：当用户保存代码文件时，自动触发代理来更新并运行测试；当用户点击手动的“拼写检查”钩子时，审查并修复README文件中的语法错误。</div>
          </div>
          <div class="card-source">来源: Key Kiro Features -> Hooks</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">文档中提到的 MCP 是什么缩写？用户可以在哪两个位置对其进行配置？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">MCP是 "Model Context Protocol" 的缩写。用户可以通过两个 `mcp.json` 文件进行配置：一个是位于工作区相对路径 `.kiro/settings/mcp.json` 的工作区级别配置文件；另一个是位于绝对路径 `~/.kiro/settings/mcp.json` 的用户级别（全局）配置文件。</div>
          </div>
          <div class="card-source">来源: Key Kiro Features -> Model Context Protocol (MCP)</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">规则</div>
          <div class="card-question">当Kiro被要求执行一个 "Spec" 中的任务时，它必须遵守的首要规则是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">规则</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在执行任何任务之前，Kiro必须始终确保已经阅读了相关的 `requirements.md`、`design.md` 和 `tasks.md` 文件。此外，它必须一次只专注于执行一个任务，并在完成后停止，等待用户审查，而不是自动进行下一个任务。</div>
          </div>
          <div class="card-source">来源: Task Instructions -> Executing Instructions</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">Kiro 的 "Specs" 特性是如何帮助进行复杂功能开发的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">"Specs" 提供了一种结构化的方法来构建和记录功能。它将设计和实现过程形式化，允许开发者与AI代理就需求、设计和实现任务进行迭代，从而实现复杂功能的增量开发，并在此过程中保持控制和获得反馈。</div>
          </div>
          <div class="card-source">来源: Key Kiro Features -> Spec</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
